<template>
    <div class="system-app-list">
        <nav-header></nav-header>
        <div class="zh-table">
            <div class="zh-table-contents">
                <el-table
                    :data="listData"
                    fixed
                    border
                    style="width: 100%">
                    <el-table-column
                        prop="name"
                        label="名称"
                        align="center"
                        show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                        prop="url"
                        label="跳转地址"
                        align="center"
                        show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                        prop="true_url"
                        label="外网跳转地址"
                        align="center"
                        show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                        prop=""
                        label="打开方式"
                        align="center"
                        show-overflow-tooltip>
                        <template slot-scope="scope">
                            {{scope.row.is_new_from === 1 ? '是' : '否'}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop=""
                        label="是否启用"
                        align="center"
                        show-overflow-tooltip>
                        <template slot-scope="scope">
                            {{scope.row.status === 1 ? '启用' : '未启用'}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="操作"
                        align="center"
                        :width="160">
                        <template slot-scope="scope">
                            <el-button @click="editRow(scope.row)" type="text">编辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
		</div>

        <el-dialog
            title="编辑应用"
            class="edit-app-list"
            width="400px"
            :visible.sync="editVisible"
            :close-on-click-modal="false">
            <el-form 
                :model="editForm" 
                :rules="rules" 
                ref="editForm" 
                label-width="80px" 
                class="edit-form">
                <el-form-item label="应用名">
                    <el-input v-model="editForm.name"></el-input>
                </el-form-item>
                <el-form-item label="调整地址">
                    <el-input v-model="editForm.url"></el-input>
                </el-form-item>
                <el-form-item label="外网跳转地址">
                    <el-input v-model="editForm.true_url"></el-input>
                </el-form-item>
                <el-form-item label="打开方式">
                    <el-radio-group v-model="editForm.is_new_from">
                        <el-radio :label="1">新标签页打开</el-radio>
                        <el-radio :label="2">本页打开</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="是否启用">
                    <el-radio-group v-model="editForm.status">
                        <el-radio :label="1">启用</el-radio>
                        <el-radio :label="2">未启用</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
			    <el-button type="primary" @click="reset" plain>取消</el-button>
                <el-button type="primary" @click="submitForm('editForm')">保存</el-button>
			</div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            editVisible: false,
            listData: [],
            editForm: {
                id: undefined,
                name: undefined,
                url: undefined,
                true_url: undefined,
                is_new_from: undefined,
                status: undefined
            }
        }
    },
    created() {
        this.getList();
    },
    methods: {
        /**
         * 获取列表数据
         */
        getList() {
            this.$ajax.get('api/app/app_list', {params: { status: '1,2'}}).then(val => {
                this.listData = val.data.data.data;
            })
        },
        /**
         * 编辑应用
         * @param {Object} obj 应用信息
         */
        editRow(obj) {
            this.editVisible = true;
            this.editForm = {
                id: obj.id,
                name: obj.name,
                url: obj.url,
                true_url: obj.true_url,
                is_new_from: obj.is_new_from,
                status: obj.status
            }
        },
        submitForm() {
            const params = {
                id: this.editForm.id,
                name: this.editForm.name,
                url: this.editForm.url,
                true_url: this.editForm.true_url,
                is_new_from: this.editForm.is_new_from,
                status: this.editForm.status
            }
            const success = (res => {
                this.$message.success(res.msg);
                this.editVisible = false;
                this.getList();
            })
            const fail = (res => {
                this.$message.error(res.msg);
            })

            this.$ajax.put('api/app/app_update', params, {func:{success: success, fail: fail}});
        },
        reset() {
            this.editVisible = false;
        }
    },
}
</script>

<style lang="scss">
    .system-app-list {
        .edit-app-list {

        }
    }
</style>